<template>
	<view class="nav-header">
		<navigator class="i-back" open-type="navigateBack">
			<uv-icon color="#fff" name="arrow-left" size="45rpx"></uv-icon>
		</navigator>
		购买船票
		<navigator class="i-index" url="/pages/user/my">
			<uv-icon color="#fff" name="account" size="45rpx"></uv-icon>
		</navigator>
	</view>

	<!--订单信息-->
	<view class="page">
		<view class="remove-p-top">
			<view class="ship-info-box ship-flight-select">
				<view class="ship-info-item-l">
					<p class="ship-time">{{chooseSeat.DepartTime}}</p>
					<p class="ship-port">{{chooseSeat.FromPortName}}</p>
				</view>
				<view class="ship-info-item">
					<p class="ship-line">{{chooseSeat.duration}}</p>
					<p class="ship-line"><uv-icon width="180rpx" height="30rpx"
							name="/static/traffic/icon/goto.png"></uv-icon></p>
					<p class="ship-line">{{chooseSeat.ShipName}}</p>
					<p class="ship-line">{{SeatName}}</p>
				</view>
				<view class="ship-info-item-r">
					<p class="ship-time">{{chooseSeat.ArriveTime}}</p>
					<p class="ship-port">{{chooseSeat.ToPortName}}</p>
				</view>
			</view>
			<view style="position: absolute;top: 160px;" class="ship-flight-line"></view>
			<view class=" ship-flight-list ship-tourist-box order-cell">
				<view class="add" style="display: flex;justify-content: space-evenly;">
					<view>
						<uv-button @click="showBatchContact()" :hairline="true" :plain="true" shape="circle"
							size="small" type="primary">+ 导入名单
						</uv-button>
					</view>
					<view>
						<uv-button @click="AddTourist()" :hairline="true" :plain="true" shape="circle" size="small"
							type="primary">+
							添加乘客
						</uv-button>
					</view>
					<view v-show="contactList.length>=1">
						<uv-button @click="onAddChildren()" :hairline="true" :plain="true" shape="circle" size="small"
							type="primary">+
							登记小童
						</uv-button>
					</view>
					<view>
						<uv-button @click="delAllContact()" :hairline="true" :plain="true" shape="circle" size="small"
							type="primary">-
							清空全部
						</uv-button>
					</view>
				</view>

				<view class="person-list" v-if="contactList.length>0">
					<h1 class="person-list-title">乘客名单</h1>
					<view class="item" v-for="(item,index) in contactList">
						<view class="left">
							<view>
								<span>{{item.userName}}</span>
							</view>
							<view>
								<span>{{item.touristType}} <span style="color: red;">￥{{item.TicketPrice}}</span></span>
							</view>
						</view>
						<view @click="editName(index)" class="center">
							<span>{{item.idNum}}</span>
						</view>
						<view @click="editName(index)" class="right">
							<span><uv-icon size="18" name="edit-pen-fill"></uv-icon></span>
						</view>
						<view @click="delContact(index)" class="right">
							<span><uv-icon size="18" name="trash-fill"></uv-icon></span>
						</view>
					</view>
				</view>
				<view class="person-list" v-if="takeChildren.length>0">
					<h1 class="person-list-title">乘客携童名单</h1>
					<view :key="index" class="item" v-for="(item,index) in takeChildren">
						<view class="left">
							<view>
								<span>{{item.childName}}</span>
							</view>
							<view>
								<span>登记手续费 ￥<span class="color-red">{{shipCharges}}</span></span>
							</view>
						</view>
						<view class="center">
							<span>{{item.idNum}}</span>
						</view>
						<view @click="delChild(index)" class="right">
							<span><uv-icon size="18" name="trash-fill"></uv-icon></span>
						</view>
					</view>
				</view>
				<p style="color: #ff5658;font-size: 13px;">
					温馨提醒：
					<br />一、不支持单独购买儿童票，儿童须与成人一起下单
					<br />二、儿童票：应满足以下其中任意一个条件
					<br />1、已经满6周岁但未满14周岁。
					<br />2、身高满1.2米但不足1.5米的未成年人。
					<br />3、未满6周岁但需要占座位的。
					<br />三、未满6周岁且不需要占座位的小童需要另行登记。
				</p>
				<view style="text-align: center;color: #3298ff;">
					<view><a href="/index/index/article?article_type=8"
							style="font-size: 16px;text-decoration: none;">查看票型说明</a>
					</view>
				</view>
				<view v-if="isShowIslandTicket">
					<view class="goods_list">
						<view class="float-left">
							<span style="font-size: 14px;font-weight: bold">购买涠洲岛火山国家地质公园门票（上岛必备）</span>
						</view>
						<view class="float-right">
							<uv-switch size="14px" v-model="buyTicket"></uv-switch>
						</view>
					</view>
					<view class="ticket-list" v-show="buyTicket">
						<view :key="index" @click="showIslandTicketSelecter(index)" class="item"
							v-for="(item,index) in islandTickets">
							<view class="left">
								<span>{{item.userName}}</span>
							</view>
							<view class="center">
								<span>{{item.idNum}}</span>
							</view>
							<view class="right">
								{{item.catName}}￥<span class="color-red">{{item.price}}</span>
								<span class="ml10"><i class="iconfont icon-bianji"></i> </span>
							</view>
						</view>
					</view>
					<uv-picker :columns="islandTicketNames" :default-index="currentIslandTicketPriceId"
						@confirm="onChooseIslandTicketPrice" ref="showIslandTicketPicker" :showToolbar="true" />
				</view>
			</view>

			<view class="ship-flight-line"></view>

			<!--订票人信息-->
			<view class="inner">
				<uv-form labelWidth="180rpx" labelPosition="left" :model="contact" :rules="mainRules" ref="mainForm">
					<view class="remove-top remove-before-line msg-box">
						<view class="msg-item">
							<uv-form-item :required="true" label="联系人名称" prop="contactName">
								<uv-input border="bottom" placeholder="请输入联系人名称"
									v-model="contact.contactName"></uv-input>
							</uv-form-item>
						</view>
						<view class="msg-item order-cell">
							<uv-form-item :required="true" label="手机号码" prop="bookingTel">
								<uv-input border="bottom" disabledColor="#fff" pattern="^\d{11}$"
									placeholder="请输入预订人手机号码" type="tel" v-model="contact.bookingTel"></uv-input>
							</uv-form-item>
						</view>
						<view class="msg-item">
							<uv-form-item>
								<uv-switch size="14px" v-model="sms">
								</uv-switch>
							</uv-form-item>
							<span style="font-size:14px;color:#999;padding-left: 10px;">是否接收短信通知</span>
						</view>
						<view class="msg-item">
							<uv-form-item>
								<uv-switch size="14px" v-model="agree">
								</uv-switch>
							</uv-form-item>
							<span style="font-size:14px;color:#999;padding-left: 10px;">是否已阅读并同意</span>
							<span style="margin-top:1px;font-size: 13px;text-align: center;">
								<a style="text-decoration: none;" href="/index/contract/ship_contract.html">《购买须知》</a>
								<a style="text-decoration: none;" href="/index/contract/ship_agree.html">《预定协议》</a>
							</span>
						</view>
					</view>
				</uv-form>
			</view>
			<view class="ship-flight-line"></view>
			<!--订票人信息-->
			<!--保险模块-->
			<view class="ship-insurance-box">
				<view class="ship-insurance-box-title">旅游意外险</view>
				<view class=" ship-insurance js_ship_insurance">
					<ul>
						<li :class="(shipInsurance==0)?'active':''" @click="shipInsurance=0">
							<p class="ship-insurance-title"> 无 </p>
							<p class="ship-insurance-detail"> 无保险 </p>
							<uv-icon top="10rpx" width="20rpx" color="#fff" class="active-icon"
								name="checkmark"></uv-icon>
						</li>
						<li :class="(shipInsurance==1)?'active':''" @click="shipInsurance=1">
							<p class="ship-insurance-title">20元档 </p>
							<p class="ship-insurance-detail"> 人身意外险 </p>
							<uv-icon top="10rpx" width="20rpx" color="#fff" class="active-icon"
								name="checkmark"></uv-icon>
						</li>
						<li :class="(shipInsurance==2)?'active':''" @click="shipInsurance=2">
							<p class="ship-insurance-title"> 10元档 </p>
							<p class="ship-insurance-detail"> 人身意外险 </p>
							<uv-icon top="10rpx" width="20rpx" color="#fff" class="active-icon"
								name="checkmark"></uv-icon>
						</li>
						<li :class="(shipInsurance==3)?'active':''" @click="shipInsurance=3">
							<p class="ship-insurance-title"> 5元档 </p>
							<p class="ship-insurance-detail"> 人身意外险 </p>
							<uv-icon top="10rpx" width="20rpx" color="#fff" class="active-icon"
								name="checkmark"></uv-icon>
						</li>
					</ul>
					<view class="clear"></view>
					<view style="padding: 10px 15px;line-height: 30px;font-size: 12px;">
						<p><a style="text-decoration: none;" href="/help/detail/id/21">条款和说明：《保险说明》</a></p>
						<p>提交购买表示已经阅读并同意购票须知和保险说明。</p>
					</view>
				</view>
			</view>
			<!--保险模块-->
		</view>
	</view>
	<view class="foot-shop-car footer-section">
		<view class="inner">
			<view class="price-box">
				<view class="all-title">金额:</view>
				<view>
					<p>￥<span id="js_amount">{{total}}</span></p>
				</view>
			</view>
			<view style="flex:1.5;width: 50%;margin-top: 8rpx;">
				<uv-button @click="submit" type="error"
					customStyle="border;background: linear-gradient(to right, #ff5758, #ff8253);"
					class="item submit-order" width="50%">立即购买
				</uv-button>
			</view>
		</view>
	</view>

	<!-- popup start -->

	<uv-popup height="80%" mode="bottom" ref="showTouristAdd" customStyle="padding:30rpx 20rpx 0 20rpx">
		<uv-form labelWidth="150rpx" labelPosition="left" :model="willAddContact" :rules="contactRules">
			<uv-form-item label="姓名" prop="userName">
				<uv-input placeholder="姓名" v-model="willAddContact.userName"></uv-input>
			</uv-form-item>
			<uv-form-item label="证件类型" prop="idType">
				<uv-input @click="showIdTypePicker()" placeholder="证件类型" v-model="willAddContact.idType"
					:disabled="true" suffixIcon="arrow-right"></uv-input>
			</uv-form-item>
			<uv-form-item label="证件号码" prop="idNum">
				<uv-input placeholder="证件号码" v-model="willAddContact.idNum"></uv-input>
			</uv-form-item>
			<uv-form-item label="船票类型" prop="touristType">
				<uv-input @click="showTouristTypePicker()" placeholder="船票类型" v-model="willAddContact.touristType"
					:disabled="true" suffixIcon="arrow-right"></uv-input>
			</uv-form-item>

			<uv-picker :columns="idTypelist" ref="idTypePicker" @confirm="onChooseIdTypeConfirm" :showToolbar="true" />

			<uv-picker ref="touristTypePicker" :columns="ticketPriceTypeList" @confirm="onChooseTouristTypeConfirm"
				:showToolbar="true" />

			<view style="margin: 16px;">
				<uv-button @click="onAddContact()" shape="circle" type="primary">提交</uv-button>
			</view>
		</uv-form>
	</uv-popup>

	<uv-popup height="80%" mode="bottom" ref="showTouristEdit" customStyle="padding:30rpx 20rpx 0 20rpx">
		<uv-form labelWidth="150rpx" labelPosition="left" :model="willAddContact" :rules="contactRules">

			<uv-form-item label="姓名" prop="userName">
				<uv-input placeholder="姓名" v-model="willAddContact.userName"></uv-input>
			</uv-form-item>
			<uv-form-item label="证件类型" prop="idType">
				<uv-input @click="showIdTypePicker()" placeholder="证件类型" v-model="willAddContact.idType"
					:disabled="true" suffixIcon="arrow-right"></uv-input>
			</uv-form-item>
			<uv-form-item label="证件号码" prop="idNum">
				<uv-input placeholder="证件号码" v-model="willAddContact.idNum"></uv-input>
			</uv-form-item>
			<uv-form-item label="船票类型" prop="touristType">
				<uv-input @click="showTouristTypePicker()" placeholder="船票类型" v-model="willAddContact.touristType"
					:disabled="true" suffixIcon="arrow-right"></uv-input>
			</uv-form-item>

			<uv-picker :columns="idTypelist" ref="idTypePicker" @confirm="onChooseIdTypeConfirm" :showToolbar="true" />

			<uv-picker ref="touristTypePicker" :columns="ticketPriceTypeList" @confirm="onChooseTouristTypeConfirm"
				:showToolbar="true" />

			<view style="margin: 16px;">
				<uv-button @click="editContact()" shape="circle" type="primary">提交</uv-button>
			</view>
		</uv-form>
	</uv-popup>

	<uv-popup ref="batchContactBox" custom-style="height: 500rpx;" mode="bottom">
		<uv-textarea placeholderStyle="height:50px" placeholder="请按照格式输入，回车换行，每个游客一行，&#13;&#10;每行格式为：姓名 + 空格 + 身份证号"
			height="380rpx" :maxlength="-1" v-model="contactText"></uv-textarea>
		<uv-button @click="batchAddContact" type="primary" shape="circle">批量导入</uv-button>
	</uv-popup>

	<uv-popup mode="top" ref="showTouristTakeChildren">
		<view
			style="background-color: #19a0f0;line-height: 40px;height: 40px;font-size: 18px;text-align: center;color: #fff;">
			添加携童信息
		</view>
		<view style="color: red;text-align: center;">* 按乘船规范，年龄不满6周岁或身高不足1.2米的小童须登记。</view>
		<uv-form :model="takeChildren" labelWidth="150rpx" labelPosition="left">
			<view v-for="(item, index) in takeChildren"
				style="margin: 20px;border-radius: 12px;box-shadow: 0 0 15px 0 #ccc;display: flex;align-items: center;flex-direction: column;">
				<p style="font-size: 18px;color: #1286F5;">(小童{{index+1}})</p>
				<uv-form-item style="width: 80%" label="姓名" prop="childName">
					<uv-input placeholder="请填写小童姓名" v-model="item.childName"></uv-input>
				</uv-form-item>
				<uv-form-item style="width: 80%" label="身份证号" prop="idNum">
					<uv-input type="number" maxlength="18" placeholder="小童身份证号" v-model="item.idNum"></uv-input>
				</uv-form-item>
			</view>
			<view style="margin: 16px;display: flex;justify-content: space-around;">
				<uv-button @click="cancelTouristTakeChildren()" size="small" shape="circle" style="width: 125px;"
					type="primary">无携童，取消登记
				</uv-button>
				<uv-button @click="confirmTouristTakeChildren()" size="small" shape="circle" style="width: 125px;"
					type="primary">
					提交登记
				</uv-button>
			</view>
		</uv-form>
	</uv-popup>

	<!-- popup end -->

</template>

<script>
	import {
		calculateAge
	} from '@/common/public.js'
	export default {
		data() {
			return {
				user: {},
				sms: false,
				userInfo: {},
				buyTicket: false,
				chooseSeat: uni.getStorageSync('selectSeatData'),
				chooseFlight: JSON.parse(decodeURIComponent(
					'%7B%22VoyageId%22%3A%22BW0012%22%2C%22ShipName%22%3A%22%E5%8C%97%E6%B8%B825%22%2C%22DepartureDate%22%3A%222025-08-21%2014%3A50%22%2C%22ShipRunMinutes%22%3A110%2C%22FromPortName%22%3A%22%E5%8C%97%E6%B5%B7%E5%9B%BD%E9%99%85%E5%AE%A2%E8%BF%90%E6%B8%AF%E7%A0%81%E5%A4%B4%22%2C%22ToPortName%22%3A%22%E6%B6%A0%E6%B4%B2%E5%B2%9B%E8%A5%BF%E8%A7%92%E7%A0%81%E5%A4%B4%22%2C%22MiniPrice%22%3A52%2C%22SupportVehicle%22%3Afalse%2C%22CanSale%22%3Atrue%2C%22LineId%22%3A56%2C%22IsSerialVoyage%22%3A0%2C%22SupportStudentTicket%22%3A0%2C%22SupportOldTicket%22%3A0%2C%22DepartTime%22%3A%2214%3A50%22%2C%22ArriveTime%22%3A%2216%3A40%22%2C%22ShipCode%22%3A%22BW0012%22%2C%22Seats%22%3A%5B%7B%22SeatId%22%3A0%2C%22SeatName%22%3A%22V%E5%AE%A2%E8%88%B1%22%2C%22SeatGradeCode%22%3A%22%22%2C%22ShipSeatType%22%3A%22965348825708720546%22%2C%22TicketLeft%22%3A15%2C%22Description%22%3Anull%2C%22TicketPriceTypeList%22%3A%5B%7B%22TicketPriceTypeID%22%3A%221%22%2C%22TicketPrice%22%3A240%7D%2C%7B%22TicketPriceTypeID%22%3A%222%22%2C%22TicketPrice%22%3A120%7D%2C%7B%22TicketPriceTypeID%22%3A%2224%22%2C%22TicketPrice%22%3A84%7D%2C%7B%22TicketPriceTypeID%22%3A%2222%22%2C%22TicketPrice%22%3A168%7D%5D%7D%2C%7B%22SeatId%22%3A0%2C%22SeatName%22%3A%22%E4%B8%80%E5%B1%82%E4%B8%BB%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%22%2C%22SeatGradeCode%22%3A%22%22%2C%22ShipSeatType%22%3A%22965348825708720544%22%2C%22TicketLeft%22%3A81%2C%22Description%22%3A%22%E4%B8%80%E5%B1%82%E4%B8%BB%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%22%2C%22TicketPriceTypeList%22%3A%5B%7B%22TicketPriceTypeID%22%3A%221%22%2C%22TicketPrice%22%3A150%7D%2C%7B%22TicketPriceTypeID%22%3A%222%22%2C%22TicketPrice%22%3A75%7D%2C%7B%22TicketPriceTypeID%22%3A%2224%22%2C%22TicketPrice%22%3A52%7D%2C%7B%22TicketPriceTypeID%22%3A%2222%22%2C%22TicketPrice%22%3A105%7D%5D%7D%2C%7B%22SeatId%22%3A0%2C%22SeatName%22%3A%22%E5%95%86%E5%8A%A1%E8%88%B1%EF%BC%88%E4%B8%89%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%EF%BC%89%22%2C%22SeatGradeCode%22%3A%22%22%2C%22ShipSeatType%22%3A%22965348825708720543%22%2C%22TicketLeft%22%3A267%2C%22Description%22%3A%22%E4%B8%89%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%22%2C%22TicketPriceTypeList%22%3A%5B%7B%22TicketPriceTypeID%22%3A%221%22%2C%22TicketPrice%22%3A210%7D%2C%7B%22TicketPriceTypeID%22%3A%222%22%2C%22TicketPrice%22%3A105%7D%2C%7B%22TicketPriceTypeID%22%3A%2224%22%2C%22TicketPrice%22%3A73%7D%2C%7B%22TicketPriceTypeID%22%3A%2222%22%2C%22TicketPrice%22%3A147%7D%5D%7D%2C%7B%22SeatId%22%3A0%2C%22SeatName%22%3A%22%E5%95%86%E5%8A%A1%E8%88%B1%EF%BC%88%E4%BA%8C%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%EF%BC%89%22%2C%22SeatGradeCode%22%3A%22%22%2C%22ShipSeatType%22%3A%22965348825708720545%22%2C%22TicketLeft%22%3A266%2C%22Description%22%3A%22%E4%BA%8C%E7%94%B2%E6%9D%BF%E5%AE%A2%E8%88%B1%22%2C%22TicketPriceTypeList%22%3A%5B%7B%22TicketPriceTypeID%22%3A%221%22%2C%22TicketPrice%22%3A180%7D%2C%7B%22TicketPriceTypeID%22%3A%222%22%2C%22TicketPrice%22%3A90%7D%2C%7B%22TicketPriceTypeID%22%3A%2224%22%2C%22TicketPrice%22%3A63%7D%2C%7B%22TicketPriceTypeID%22%3A%2222%22%2C%22TicketPrice%22%3A126%7D%5D%7D%5D%2C%22smallCarCount%22%3A-1%2C%22smallCarNewEnergyCount%22%3A-1%2C%22busCount%22%3A-1%2C%22busNewEnergyCount%22%3A-1%2C%22quickSchedule%22%3A-1%2C%22newEnergyVoyage%22%3A-1%2C%22duration%22%3A%221%E5%B0%8F%E6%97%B650%E5%88%86%E9%92%9F%22%2C%22sale_num%22%3A629%2C%22price%22%3A52%7D'
				)),
				willAddContact: {
					userName: '',
					idNum: '',
					idType: '身份证',
					touristType: '成人票',
					TicketPrice: [],
				},
				contactList: [],
				// idTypelist:['身份证','护照','回乡证','港澳台通行证','台胞证','台湾通行证'],
				idTypelist: [
					['身份证']
				],
				ticketPriceTypeList: [
					['成人票', '儿童票', '市民票', '市民儿童票']
				],
				bookingTel: '',
				total: 0.00,
				contactText: '',
				contact: {
					contactName: '',
					bookingTel: ''
				},
				contactName: '',
				mainRules: {
					'contact.contactName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'contact.bookingTel': {
						type: 'number',
						required: true,
						message: '请输入预订人手机号码',
						trigger: ['blur', 'change']
					}
				},
				baoFee: 0,
				islandTicketPrices: [],
				islandTickets: [],
				isShowIslandTicket: false,
				currentIslandTicketPriceId: 0,
				currentIsLandTickeIndex: 0,
				agree: false,
				charge: null,
				isDate: 1,
				takeChildren: [],
				takeChildrenConfig: {},
				shipCharges: 3,
				contactRules: {
					'willAddContact.userName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'willAddContact.idType': {
						required: true,
						message: '请选择证件类型',
						trigger: ['blur', 'change']
					},
					'willAddContact.idNum': {
						type: 'int',
						required: true,
						message: '请填写证件号码',
						trigger: ['blur', 'change']
					},
					'willAddContact.touristType': {
						required: true,
						message: '请选择船票类型',
						trigger: ['blur', 'change']
					}
				},
				shipInsurance: 0,
				SeatName: ''
			}
		},
		onLoad(op) {
			var openSale = 0;
			if (this.chooseFlight.FromPortName.indexOf('海口') >= 0 || this.chooseFlight.ToPortName.indexOf(
					'海口') >= 0) {
				this.ticketPriceTypeList = ['成人票', '儿童票'];
			}
			this.SeatName = op.SeatName;
			this.initData();
		},
		watch: {
			contactList: function() {
				let islandTickets = [];
				if (this.contactList.length > 0) {
					for (let i = 0; i < this.contactList.length; i++) {
						let item = this.contactList[i];
						for (let n = 0; n < this.islandTicketPrices.length; n++) {
							if (this.islandTicketPrices[n].cat_name === item.tourist_type) {
								islandTickets.push({
									'user_name': item.username,
									'id_num': item.id_num,
									'cat_id': this.islandTicketPrices[n].cat_id,
									'cat_name': item.tourist_type,
									'price': this.islandTicketPrices[n].price,
									'goods_id': this.islandTicketPrices[n].goods_id,
									'price_id': n
								})
								break;
							}
						}
					}
				}
				this.islandTickets = islandTickets;
				this.computeTotal();
			},
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			setShowIslandTicket: function() {
				if (this.chooseFlight.FromPortName.indexOf('北海') >= 0 && this.chooseFlight.ToPortName
					.indexOf('涠洲') >= 0) {
					if (this.islandTicketPrices.length > 0) {
						this.isShowIslandTicket = true;
					}
				}
			},
			showIslandTicketSelecter: function(index) {
				let item = this.islandTickets[index];
				this.currentIslandTicketPriceId = item.price_id
				this.$refs.showIslandTicketPicker.open();
				this.currentIsLandTickeIndex = index;
			},
			onChooseIslandTicketPrice: function(name, index) {
				let item = this.islandTicketPrices[index];
				var thiz = this;
				// axios.post('/index/shiporder/validate_age_ticket', {
				// 		idCard: this.islandTickets[this.currentIsLandTickeIndex].id_num,
				// 		cat_id: item.cat_id
				// 	})
				// 	.then(function(r) {
				// 		if (r.status == 200) {
				// 			if (r.data.code == 1) {
				// 				thiz.islandTickets[thiz.currentIsLandTickeIndex].price_id = index;
				// 				thiz.islandTickets[thiz.currentIsLandTickeIndex].cat_id = item.cat_id;
				// 				thiz.islandTickets[thiz.currentIsLandTickeIndex].cat_name = item
				// 					.cat_name;
				// 				thiz.islandTickets[thiz.currentIsLandTickeIndex].price = item.price;
				// 				thiz.compute_total();
				// 				thiz.showIslandTicketPicker = false;
				// 			} else {
				// 				uni.showToast('身份证年龄与选择购票类型不匹配，请重新选择');
				// 			}
				// 		} else {
				// 			uni.showToast('系统繁忙');
				// 		}

				// 	}).catch(function(error) {
				// 		console.log(error);
				// 	});
			},
			async initData() {
				await this.getGoodsPrice();
				this.getContactList();
				this.getCharge();
				this.getConfig();
			},
			editName(index) {
				this.$refs.showTouristEdit.open();
				this.willAddContact = this.contactList[index];
			},
			closeArticle() {
				this.showArticle = false;
			},
			showBatchContact() {
				this.$refs.batchContactBox.open();
			},
			getTouristType(idNum) {
				const age = calculateAge(idNum);
				if (age >= 6 && age < 14) return '儿童票';
				if (age >= 14) return '成人票';
				return '成人票';
			},
			batchAddContact() {
				var thiz = this;
				//按回车分割文本
				const lines = thiz.contactText.split('\n');

				lines.forEach(line => {
					line = line.trim();
					if (!line) return; //跳过空行

					//按空格分割姓名和身份证号
					const [userName, idNum] = line.split(/\s+/);

					if (userName && idNum) {
						//添加到联系人列表
						// 计算年龄并判断票类型 (18位身份证号)

						thiz.contactList.push({
							userName: userName,
							idType: '身份证',
							idNum: idNum,
							touristType: this.getTouristType(idNum)
						});
						//保存到localStorage
						uni.setStorageSync('contactList', thiz.contactList);
					} else {
						uni.showToast({
							icon: 'error',
							title: `格式错误: ${line}，正确格式应为"姓名 身份证号"`,
							duration: 2000
						});
					}
				});

				//清空输入框
				thiz.contactText = '';
				uni.showToast({
					title: `成功导入 ${thiz.contactList.length} 条联系人`,
					duration: 2000
				});
				thiz.getContactList();
				thiz.computeTotal();
				thiz.$refs.batchContactBox.close();
			},
			choose_contact(item, index) {
				if (item.checked) {
					this.contactList.push(item)
				} else {
					var contactList = []
					for (var i = 0; i < this.contactList.length; i++) {
						if (item.id_num !== this.contactList[i].id_num) {
							contactList.push(this.contactList[i])
						}
					}
					this.contactList = contactList
				}
			},
			submit() {
				if (!this.agree) {
					uni.showToast({
						icon: 'error',
						title: '购买船票必须同意须知、协议',
						duration: 2000
					});
					return;
				}
				if (this.contactList.length > 10) {
					uni.showToast({
						icon: 'error',
						title: '一次下单联系人数量不能超过10人，请分批次购买',
						duration: 2000
					});
					return;
				}
				if (this.chooseSeat.TicketLeft == 0) {
					uni.showToast({
						icon: 'error',
						title: '该船票已售完',
						duration: 2000
					});
					return;
				}
				if (this.contactList.length > this.chooseSeat.TicketLeft) {
					uni.showToast({
						icon: 'error',
						title: '剩余票数为：' + this.chooseSeat.TicketLeft + '张乘客数已超出',
						duration: 2000
					});
					return;
				}
				for (var i = 0; i < this.contactList.length; i++) {
					if (this.contactList[i].id_type == '身份证' && this.contactList[i].id_num.length != 18) {
						uni.showToast({
							icon: 'error',
							title: this.contactList[i].username + '身份证号码要求为18位',
							duration: 2000
						});
						return;
					}
				}
				localStorage.setItem('last_tel', this.bookingTel);
				let charge = parseFloat(this.charge.price) * this.contactList.length;
				let submitData = {
					booking_tel: this.bookingTel,
					total: this.total,
					contact_name: this.contactName,
					contactList: this.contactList,
					chooseSeat: this.chooseSeat,
					chooseFlight: this.chooseFlight,
					pay_type: 1,
					isBuyTicket: this.buyTicket,
					bao_fee: this.baoFee,
					coupon_price: this.user.coupon_price,
					agree: this.agree,
					sms: this.sms,
					is_date: this.isDate,
					take_children: this.takeChildren,
					children_charge: this.shipCharges,
					charge,
					shipInsurance: this.shipInsurance
				};
				if (submitData.isBuyTicket) {
					submitData.islandTickets = this.islandTickets
				}
				let tips = '';
				if (!this.checkTheNumberOfChildren()) return;
				if (this.charge.price > 0) {
					tips = '1、' + this.charge.dateTypeName +
						'期间另收' + this.charge.price + '元/张服务费；<br>2、付款成功后，请打开订单查看出票是否成功；<br>3、出票失败会自动退款，没有短信通知；';

					var _this = this;
					uni.showModal({
						title: '温馨提示',
						content: tips,
						showCancel: false,
						success: res => {
							_this._submit(submitData);
						}
					});
				} else {
					this._submit(submitData);
				}
			},
			_submit(submitData) {
				uni.showLoading({
					title: '提交订单...',
					mask: true
				});
				uni.request({
					url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
					data: submitData,
					success: (res) => {
						if (res.data.code === 1) {
							uni.navigateTo({
								url: '/pages/home/pay?order_type=4'
							})
						}
					}
				});
			},
			getContactList() {
				let storageContactList = uni.getStorageSync('contactList');
				if (storageContactList.length > 0) {
					this.contactList = storageContactList;
				}
				let storageChildrenList = uni.getStorageSync('takeChildrenList');
				if (storageChildrenList.length > 0) {
					this.takeChildren = storageChildrenList;
				}
			},
			AddTourist() {
				this.$refs.showTouristAdd.open();
				this.willAddContact = {
					userName: '',
					idNum: '',
					idType: '身份证',
					touristType: '成人票',
					TicketPrice: [],
				};
			},
			delAllContact() {
				this.contactList = [];
				this.takeChildren = [];
				uni.removeStorageSync('contactList');
				uni.removeStorageSync('takeChildrenList');
				// h5情况下删除localstorage
				localStorage.removeItem('contactList');
				localStorage.removeItem('takeChildrenList');
			},
			delContact(index) {
				this.contactList.splice(index, 1);
				uni.setStorageSync('contactList', this.contactList)
				this.computeTotal()
			},
			delChild(index) {
				this.takeChildren.splice(index, 1);
				if (this.takeChildren.length > 0) {
					uni.setStorageSync('takeChildrenList', this.takeChildren);
				} else {
					uni.removeStorageSync('takeChildrenList');
				}
				this.computeTotal()
			},
			onAddChildren() {
				this.$refs.showTouristTakeChildren.open();
				if (this.contactList.length < 1) {
					uni.showToast({
						icon: 'fail',
						title: '无座小童必须有大人携带乘船！',
						duration: 2000
					});
				}
				this.takeChildren.push({
					'childName': '',
					'idNum': ''
				});
			},
			confirmTouristTakeChildren() {
				this.$refs.showTouristTakeChildren.close();
				let age = calculateAge(this.takeChildren.idNum);
				if (age >= 6) {
					uni.showToast({
						icon: 'fail',
						title: '登记小童需要小于6岁',
						duration: 2000
					});
					return false;
				}
				uni.setStorageSync('takeChildrenList', this.takeChildren)
				this.computeTotal();
			},
			cancelTouristTakeChildren() {
				this.takeChildren = this.takeChildren.filter(item => item.childName !== '');
				this.$refs.showTouristTakeChildren.close();
			},
			checkTheNumberOfChildren() {
				let children = 0,
					adult = 0;
				this.contactList.forEach(function(v, i) {
					if (v.type === '半票')
						children++;
					else
						adult++;
				});
				if (adult === 0) {
					if (children >= 1) {
						uni.showToast({
							icon: 'error',
							title: '儿童乘船须有大人陪同',
							duration: 2000
						});
						return false;
					}
				} else if (adult <= this.takeChildrenConfig[0]['adult']) {
					if (children > this.takeChildrenConfig[0]['limit']) {
						uni.showToast({
							icon: 'error',
							title: this.takeChildrenConfig[0]['adult'] + '名大人最多带' + this.takeChildrenConfig[0][
								'limit'
							] + '名儿童乘船',
							duration: 2000
						});
						return false;
					}
				} else if (adult >= this.takeChildrenConfig[1]['adult']) {
					if (children > this.takeChildrenConfig[1]['limit']) {
						uni.showToast({
							icon: 'error',
							title: '最多带' + this.takeChildrenConfig[1]['limit'] + '名儿童乘船',
							duration: 2000
						});
						return false;
					}
				}
				return true;
			},
			computeTotal() {
				let total = 0;
				let contactList = this.contactList;
				let TicketPrice = []
				let choosedSeat = this.chooseSeat.Seats;
				var _this = this;

				choosedSeat.forEach(function(v, i) {
					if (v.SeatName == _this.SeatName) {
						for (var i = 0; i < v.TicketPriceTypeList.length; i++) {
							TicketPrice[v.TicketPriceTypeList[i].TicketPriceTypeID] = v
								.TicketPriceTypeList[i].TicketPrice;
						}
					}
				})

				//计算携童手续费
				if (this.takeChildren.length > 0) {
					total += this.takeChildren.length * (this.shipCharges * 1)
				}

				//船票总价格
				for (var i = 0; i < contactList.length; i++) {
					if (contactList[i].touristType == '儿童票') {
						total += TicketPrice[2]
						contactList[i]['TicketPrice'] = TicketPrice[2]
						contactList[i]['TicketPriceTypeID'] = 2
					}
					if (contactList[i].touristType == '成人票') {
						total += TicketPrice[1]
						contactList[i]['TicketPrice'] = TicketPrice[1]
						contactList[i]['TicketPriceTypeID'] = 1
					}
					if (contactList[i].touristType == '市民票') {
						if (TicketPrice[22] === undefined) {
							uni.showToast({
								icon: 'error',
								title: '暂无市民票可售',
								duration: 2000
							});
							continue;
						}
						total += TicketPrice[22]
						contactList[i]['TicketPrice'] = TicketPrice[22]
						contactList[i]['TicketPriceTypeID'] = 22
					}
					if (contactList[i].touristType == '市民儿童票') {
						if (TicketPrice[24] === undefined) {
							uni.showToast({
								icon: 'error',
								title: '暂无市民儿童票可售',
								duration: 2000
							});
							continue;
						}
						total += TicketPrice[24]
						contactList[i]['TicketPrice'] = TicketPrice[24]
						contactList[i]['TicketPriceTypeID'] = 24
					}
				}

				//上岛票总价格
				if (this.buyTicket) {
					let islandTickPrice = 0;
					for (var i = 0; i < this.islandTickets.length; i++) {
						if (this.islandTickets[i].price === '') {
							this.islandTickets[i].price = 0;
						}
						islandTickPrice += parseFloat(this.islandTickets[i].price)
					}
					total += islandTickPrice;
				}
				this.total = total;
				this.contactList = contactList;
				uni.setStorageSync('contactList', this.contactList)
			},
			onAddContact() {
				this.$refs.showTouristAdd.close();
				var thiz = this;
				if (this.contactList.length > 10) {
					uni.showToast({
						icon: 'error',
						title: '一次下单联系人数量不能超过10人，请分批次购买',
						duration: 2000
					});
					return;
				}
				this.checkTheNumberOfChildren();
				if (this.willAddContact.tourist_type == '儿童票' || this.willAddContact
					.tourist_type == '市民儿童票')
					this.willAddContact.type = '半票';
				else
					this.willAddContact.type = '全票';

				try {
					this.contactList.push(this.willAddContact);
					uni.setStorageSync('contactList', this.contactList);
					this.resetWillAddContact();
				} catch (e) {
					uni.showToast({
						icon: 'error',
						title: '添加联系人保存错误，请重试',
						duration: 2000
					});
				}
			},
			editContact(index) {
				this.$refs.showTouristEdit.close();
				var thiz = this;
				this.checkTheNumberOfChildren();

				try {
					this.contactList[index] = this.willAddContact;
					uni.setStorageSync('contactList', this.contactList);
					this.resetWillAddContact();
				} catch (e) {
					uni.showToast({
						icon: 'error',
						title: '添加联系人保存错误，请重试',
						duration: 2000
					});
				}
			},
			getGoodsPrice: function() {
				let date = '';
				if (this.chooseFlight.DepartureDate) {
					date = this.chooseFlight.DepartureDate.split(' ');
					date = date[0];
				}
				this.islandTicketPrices = [{
						"cat_id": "9",
						"cat_name": "成人票",
						"price": "105"
					},
					{
						"cat_id": "10",
						"cat_name": "儿童票",
						"price": "55"
					},
					{
						"cat_id": "11",
						"cat_name": "老人票",
						"price": "55"
					},
					{
						"cat_id": "12",
						"cat_name": "市民票",
						"price": "105"
					},
					{
						"cat_id": "50",
						"cat_name": "市民儿童票",
						"price": "55"
					}
				];
				this.setShowIslandTicket();
			},
			getCharge: function() {
				let time = this.chooseFlight.DepartureDate.split(' ');
				let date = time[0];
				var _this = this;
				uni.request({
					url: getApp().globalData.API_BASE_URL + 'shiporder/charge?date=' + date,
					method: 'GET',
					success(res) {
						if (res.data.data) {
							_this.charge = res.data.data.charge;
						}
					}
				});
			},
			getConfig: function() {
				var _this = this;
				// uni.request({
				// 	url: getApp().globalData.API_BASE_URL + 'shiporder/charge?date=' + date,
				// 	method: 'GET',
				// 	success(res) {
				// 		if (res.data.data) {
				// 			_this.charge = res.data.data.charge;
				// 		}
				// 	}
				// });
			},
			showIdTypePicker: function() {
				this.$refs.idTypePicker.open();
			},
			onChooseIdTypeConfirm(e) {
				this.willAddContact.idType = e.value[0]
			},
			showTouristTypePicker: function() {
				this.$refs.touristTypePicker.open()
			},
			onChooseTouristTypeConfirm(e) {
				this.willAddContact.touristType = e.value[0]
			},
			resetWillAddContact() {
				this.willAddContact = {
					userName: '',
					idNum: '',
					idType: '身份证',
					touristType: '成人票',
					TicketPrice: [],
				}
			}
		},
		computed: {
			islandTicketNames: function() {
				let tickets = [];
				if (this.islandTicketPrices.length > 0) {
					this.islandTicketPrices.forEach(item => {
						tickets.push(item.cat_name);
					})
				}
				return tickets;
			}
		}
	}
</script>

<style scoped>
	.nav-header {
		height: 64rpx;
		width: 100%;
		background: #3298ff;
		color: white;
		font-size: 35rpx !important;
		text-align: center;
		line-height: 64rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page {
		background: #f7f7f7;
		overflow-y: auto;
	}

	.ship-info-box {
		padding: 20px 15px 65px 15px;
		background: #3298ff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.ship-info-box .ship-line {
		font-size: .8rem;
		color: #888888;
	}

	.ship-flight-line {
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(.5);
		width: 100%;
	}

	.ship-info-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ship-info-item-l {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ship-info-item-r {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.ship-flight-select {
		background: #3298ff;
	}

	.ship-flight-select p,
	.ship-flight-select .ship-line {
		color: #fff;
	}

	.ship-time {
		font-size: 1rem;
	}

	.ship-port {
		font-size: .8rem;
		color: #888888;
	}

	.ship-tourist-box {
		width: 86%;
		margin: -50px auto 0 !important;
		background-color: #fff;
		padding: 10px 15px;
		border-radius: 10px !important;
	}

	.person-list {
		padding-top: 30rpx;
		border-bottom: 0.5px solid #c3c3c3;
	}

	.person-list-title {
		font-size: 16px;
		text-align: center;
		color: #3298ff;
	}

	.person-list>.item {
		font-size: 12px;
		display: flex;
		align-items: center;
	}

	.person-list>.item>.left {
		flex: 2;
		overflow: hidden;
	}

	.person-list>.item>.center {
		line-height: 3rem;
		flex: 3;
	}

	.person-list>.item>.right {
		flex: 1;
		text-align: center;
		line-height: 3rem;
	}

	.tourist-item {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: baseline;
	}

	.tourist-item .item-check {
		width: 6%;
		box-sizing: border-box;
	}

	.tourist-item .item-main {
		width: 90%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.tourist-item .item-edit img {
		width: 100%;
	}

	.tourist-msg,
	.child-msg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tourist-msg .name,
	.child-msg .name {
		width: 19%;
	}

	.tourist-msg .type,
	.child-msg .type {
		width: 12%;
		text-align: center;
	}

	.tourist-msg .id-num,
	.child-msg .id-num {
		width: 50%;
		text-align: right;
	}

	.tourist-msg .item-edit,
	.child-msg .item-edit {
		width: 5%;
		text-align: center;
	}

	.tourist-msg div {
		font-size: 14px;
	}

	.child-msg div {
		font-size: 12px;
		color: #3298ff;
	}

	.child-msg .iconfont {
		font-size: 14px;
	}

	.page>.remove-p-top .inner {
		padding-bottom: 3rem;
	}

	.msg-box {
		background-color: #f7f7f7;
		line-height: 1.47058824rem;
		font-size: 17px;
		overflow: hidden;
		position: relative;
		width: 92%;
		margin: 0 auto;
	}

	.msg-box .msg-item {
		padding: 10px 15px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 10px 0;
		background: #fff;
		border-radius: 10px;
	}

	.goods_list {
		display: flex;
		align-items: flex-end;
	}

	.must-fill {
		font-size: 13px;
	}

	.must-fill:before {
		content: "*";
		font-size: 20px;
		color: #ff5658;
	}

	.ship-insurance-box {
		padding-bottom: 4rem;
	}

	.ship-insurance-box-title {
		margin-top: 1.77rem;
		margin-bottom: 1.3rem;
		padding-left: 15px;
		padding-right: 15px;
		color: #999;
		font-size: 14px;
	}

	.ship-insurance {
		padding: 10px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overflow-y: hidden;
		white-space: nowrap;
		background-color: #fff;
		font-size: 17px;
		position: relative;
	}

	.ship-insurance ul {
		padding: 0;
	}

	.ship-insurance ul li {
		display: inline-block;
		overflow: hidden;
		width: 80px;
		border: 1px solid #ddd;
		margin-left: 10px;
		padding: 5px;
		border-radius: 8px;
	}

	.ship-insurance ul li.active {
		border: 1px solid red;
		position: relative;
	}

	.ship-insurance ul li p {
		text-align: center;
		font-size: 14px;
	}

	.ship-insurance-detail {
		margin-top: 5px;
		padding-top: 5px;
		border-top: 1px solid #e1e1e1;
		color: #ff5a57;
	}

	.ship-insurance ul li .active-icon {
		display: none;
	}

	.ship-insurance ul li.active .active-icon {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		text-align: center;
		border-top-left-radius: 8px;
		background: red;
		z-index: 9;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.footer-section {
		max-width: 768px;
		margin: auto;
		background: white;
		z-index: 10;
	}

	.foot-shop-car {
		background: white;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 46px;
		border-top: 1px saddlebrown;
		border-top: 1px solid #e5e5e5;
	}

	.foot-shop-car .inner {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 92%;
		margin: 0 auto;
	}

	.foot-shop-car .price-box {
		flex: 1;
		border-top: 0 solid #ddd;
		height: 45px;
		align-items: center;
		display: flex;
	}

	.foot-shop-car .price-box .all-title {
		padding-left: 0;
	}

	.foot-shop-car .price-box p {
		color: #ff5658;
	}

	.foot-shop-car .inner .item.submit-order {
		flex: 1;
		color: white;
		height: 100%;
		height: 46px;
		line-height: 46px;
	}
</style>